<!doctype html>
<html lang="zh">

<head>
    <title>科大协和医院后台管理系统</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- vue 用户界面 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios 网络通信 ajax -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
        body {
            margin: 0
        }

        .Zcontainer {
            width: 1100px;
            /* border: 2px solid blue; */
            margin: 30px auto 0px;
        }

        .column-1 {
            width: 300px;
            /* height: 700px; */
            background-color: aqua;
            float: left;
        }

        .column-2 {
            width: 700px;
            /* height: 700px; */

            float: right;
        }

        .clear {
            clear: both;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .flex-float {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .flex-float div {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div id="app">

        <!-- 首页导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="#">科大协和医院</a>
            <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
                data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
                aria-label="Toggle navigation"></button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

                    <li class="nav-item active mx-3">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>

                    <li class="nav-item dropdown mx-3">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">医院概况</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a class="dropdown-item" href="#">医院介绍</a>
                            <a class="dropdown-item" href="#">组织架构</a>
                            <a class="dropdown-item" href="#">医院历史</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown mx-3">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">医疗服务</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a class="dropdown-item" href="#">门诊排班</a>
                            <a class="dropdown-item" href="#">预约挂号</a>
                            <a class="dropdown-item" href="#">住院须知</a>
                            <a class="dropdown-item" href="#">医保专区</a>
                            <a class="dropdown-item" href="#">体检服务</a>
                        </div>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#">科室导航</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#">学术交流</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="搜索科室、医师">
                    <button class="btn btn-success my-2 my-sm-0 px-3" type="submit">搜索</button>
                </form>
            </div>
        </nav>
        <!-- 巨幕 -->
        <div class="jumbotron jumbotron-fluid pb-1 pt-5 mb-0">
            <div class="container">
                <h1 class="display-3">科室管理</h1>
                <p class="lead">科大协和医院</p>
            </div>
        </div>
        <!-- 页面导航 -->
        <nav class="breadcrumb">
            <span class="breadcrumb-item active">首页</span>
            <a class="breadcrumb-item" href="fdpmt.html">一级科室管理</a>
            <a class="breadcrumb-item" href="doctor.html">医生信息管理</a>
            <a class="breadcrumb-item" href="patient.html">就诊人管理</a>
            <a class="breadcrumb-item" href="register.html">预约挂号表管理</a>
        </nav>
        <!--show 科室-->
        <div class="container">
            <!--增加二级科室-->
            <button type="button" class="btn btn-success my=3" data-toggle="modal" data-target="#modelIdads">
                新增二级科室
            </button>
            <!-- Modal  新增加二级科室-->
            <div class="modal fade" id="modelIdads" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">新增二级科室</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="container-fluid">
                                <div class="form-group">
                                    <label for="">科室名称</label>
                                    <input type="text" v-model="sname" class="form-control" name="" id=""
                                        aria-describedby="helpId" placeholder="">

                                </div>
                                <div class="form-group">
                                    <label for="">所属父科室</label>
                                    <select class="form-control" name="" id="" v-model="fidstring">
                                        <option v-for="(p,index) in dpmtList" :key="index">{{p.id}}----{{p.name}}
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="">科室介绍</label>
                                    <input type="text" v-model="sdescription " class="form-control" name="" id=""
                                        aria-describedby="helpId" placeholder="">

                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" @click="addSdpmt()" class="btn btn-primary"
                                data-dismiss="modal">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--展示科室-->
            <div class="Zcontainer">
                <div class="column">
                    <div class="column-1">
                        <ul class="list-group">
                            <li v-for="(item) in dpmtList" @click="showCard(item.id)"
                                class="list-group-item d-flex justify-content-between align-items-center">
                                {{item.name}}
                                <span class="badge badge-primary badge-pill">{{item.subAmount}}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="column-2">
                        <div class="flex-float">
                            <div v-for="item in second" class="card" style="width: 18rem;">
                                <div class="card-body">
                                    <h5 class="card-title">{{item.sdname}}</h5>
                                    <p class="card-text">{{item.sdescription}}</p>
                                    <a href="" class="card-link" type="button" data-toggle="modal"
                                        data-target="#modelIdmdfy" @click="saveSdid(item)">修改</a>
                                    <!-- Modal  修改二级科室-->
                                    <div class="modal fade" id="modelIdmdfy" tabindex="-1" role="dialog"
                                        aria-labelledby="modelTitleId" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">修改二级科室</h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="container-fluid">
                                                        <div class="form-group">
                                                            <label for="">科室名称</label>
                                                            <input type="text" v-model="sname" class="form-control"
                                                                name="" id="" aria-describedby="helpId" placeholder="">

                                                        </div>
                                                        <div class="form-group">
                                                            <label for="">所属父科室</label>
                                                            <select class="form-control" name="" id="" v-model="fidstring">
                                                                <option v-for="(p,index) in dpmtList" :key="index">{{p.id}}----{{p.name}}
                                                                </option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="">科室介绍</label>
                                                            <input type="text" v-model="sdescription"
                                                                class="form-control" name="" id=""
                                                                aria-describedby="helpId" placeholder="">

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">取消</button>
                                                    <button type="button" @click="updaSdpmt()" class="btn btn-primary"
                                                        data-dismiss="modal">保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="" class="card-link" @click="delSdpmt(item.sdid)">删除</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                dpmtList: [],
                second: [],
                fname: '',
                sname: '',
                fidstring: '',
                fid: '',
                sdescription: '',
                sid:'',//更新时用
            },
            methods: {
                //保留子科室,以便更新
                saveSdid:function(sdpmt){
                    this.sname=sdpmt.sdname;
                    //this.fidstring=sdpmt.id+"----"+sdpmt.sdname;
                    this.sdescription=sdpmt.sdescription;
                    this.sid=sdpmt.sdid;
                },
                //更新
                updaSdpmt:function(){
                    let id = this.sid;
                    //字符串分割函数
                    this.fid = this.fidstring.split('----')[0];
                    url = `/api/Sdepartment/${id}`
                    let params = {
                        'sdid': id,
                        'sdname': this.sname,
                        'fdid': this.fid,
                        'sdescription': this.sdescription,
                    }
                    axios.put(url, params)
                        .then(res => {
                            //成功
                            console.log(res)
                            this.showCard(this.fid);
                            //alert("编辑成功！")
                        })
                        .catch(err => {
                            console.error(err);
                        })
                },
                //删除二级科室
                delSdpmt: function (Sdid) {
                    //Http的delete
                    //alert(Sdid);
                    let url = `/api/Sdepartment/${Sdid}`
                    axios.delete(url)
                        .then(res => {
                            this.search();
                            this.showCard(this.fid);
                        })
                        .catch(err => {
                            console.error(err);
                        })
                },
                //增加二级科室
                addSdpmt: function () {
                    let url = '/api/Sdepartment'
                    //字符串分割函数
                    this.fid = this.fidstring.split('----')[0];
                    let params = {
                        'sdname': this.sname,
                        'fdid': this.fid,
                        'sdescription': this.sdescription,
                    }
                    axios.post(url, params)
                        .then(res => {
                            console.log(res);
                            this.sname = '';
                            this.fidstring = '';
                            this.sdescription = '';
                            this.search();
                            this.showCard(this.fid);
                            //alert("添加成功！")
                        })
                        .catch(err => {
                            console.log(err)
                        })
                    //this.showCard(this.fid);
                },
                //根据父id,展示二级科室
                showCard(id) {
                    this.fid = id;
                    this.second = [];
                    let url = `/api/SdpmtByFid/${id}`
                    axios.get(url)
                        .then(res => {
                            this.second = res.data;
                        })
                        .catch(err => {
                            //出错了
                            console.error(err);
                        })
                },
                //搜索,科室，一级and二级
                search: function () {
                    let url = '/api/departmentList'
                    axios.get(url)
                        .then(res => {
                            this.dpmtList = res.data;
                            //console.log(this.dpmtList);
                        })
                        .catch(err => {
                            //出错了
                            console.error(err);
                        })
                },
            },
            mounted() {
                //请求服务器获得数据
                //HTTP：GET,POST,PUT,DELETE
                this.search();
            },
        })
    </script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</body>

</html>